<template>
  <div>
    <mt-spinner v-show="loading" style="margin: 0 auto;" color="#e72e0d" type="double-bounce"></mt-spinner>
    <div class="index-code">
      <div class="item cur-flex cur-align-center">
        <i class="icon iconfont icon-shoujihaomax"></i>
        <mt-field class="item-phone" label="" placeholder="请输入账号" type="tel" v-model="form.phone"></mt-field>
      </div>
      <div class="item cur-flex cur-align-center">
        <i class="icon iconfont icon-xiaoxizhongxinx"></i>
        <mt-field v-model="form.code" label="" placeholder="输入验证码">
          <div @click="getDynamicCode()" v-if="!timeStart" style="height: 48px;width: 100%;line-height: 48px;color: #0d7bcf;">获取验证码</div>
          <div v-if="timeStart">
            <i>{{time}}</i>&nbsp;&nbsp;秒后重新获取</div>
        </mt-field>
      </div>
      <mt-button :disabled="loading" style="letter-spacing: 4px;" @click.native="loginByCode()" class="submit-btn" type="danger">登录</mt-button>
    </div>
  </div>
</template>
<script>
import * as api from '@/service/api'
import cookie from '@/utils/cookie'
export default {
  data () {
    return {
      loading: false,
      form: {
        phone: '',
        code: ''
      },
      time: 60,
      timeStart: false,
      rules: {
        phone: { required: true, message: '请输入手机号', pattern: /^0?1[3-8][0-9]\d{8}$/ },
        code: { required: true, message: '请输入验证码' }
      }
    }
  },
  created () {
    if (localStorage.getItem('userAccount')) {
      this.form.phone = localStorage.getItem('userAccount')
    }
  },
  computed: {
    // 来源网址
    url () {
      return this.$route.query.url || ''
    },
    curRoute () {
      return this.$route.path
    }
  },
  methods: {
    async getDynamicCode () {
      try {
        await api.getDynamicCode({
          phone: this.form.phone
        })
        this.timer()
      } catch (err) {
        console.log(err)
      }
    },
    async loginByCode () {
      try {
        try {
          await this.validate(this.form, this.rules)
        } catch (e) {
          console.log(e)
          return false
        }
        if (this.form.phone && this.form.code) {
          this.loading = true
          let res = await api.loginByCode({
            phone: this.form.phone,
            code: this.form.code
          })
          this.loading = false
          this.loginNext(res.data.accessToken.accessToken)
        }
      } catch (e) {
        console.log(e)
        this.loading = false
      }
    },
    timer () {
      this.time = 59
      this.timeStart = true
      let timer = setInterval(() => {
        this.time--
      }, 1000)
      setTimeout(() => {
        this.timeStart = false
        window.clearInterval(timer)
      }, 60000)
    },
    loginNext (token) {
      cookie.set('device_id', token)
      sessionStorage.setItem('token', token)
      if (this.url) {
        window.location.href = this.url
      } else {
        this.$store.dispatch('getUserInfo')
        this.$router.push('/dashboard/index')
      }
    }
  }
}
</script>
<style lang="scss">
.index-code {
  .item i {
    font-size: 38px;
    color: $gray-darker;
  }
  .mint-cell {
    width: 100%;
    font-size: 26px;
  }
  .mint-cell-wrapper {
    background-image: none;
  }
  .item-phone {
    border-bottom: 0;
  }
  .submit-btn {
    width: 100%;
    font-size: 28px;
    margin-top: 48px;
  }
}
</style>
